<template>
<section >
    <div class="es-form-item">
      <span>模块显示</span>
             <el-radio-group v-model="custormItemData.conceal">
                <div style="margin-left:20px;">
                    <el-radio label="1">显示</el-radio>
                    <el-radio label="2">隐藏</el-radio>
                </div>
              </el-radio-group>
    </div>
    <div class="es-form-item">
      <div>
        <span>标题名称</span>
          <el-input v-model="custormItemData.advertisementtitle" placeholder="请输入标题名称" style="width:70%;margin-left:20px;"></el-input>
      </div>
          
    </div>
     <div class="es-form-item">
        <section>
          <div class="ivu-alert"> <span>建议图片宽度690，高度145，支持jpg、png。</span></div>
        <div style="display:flex;align-items:center;">
          <div class="form-label mb-20">标题图片</div>
          <!-- <div class="ivu-alert"> <span>建议图片宽度750，高度200-950，支持jpg、png。</span></div> -->
          <div v-for="(item, index) in custormItemData.shopdata" :key="index">
            <div class="item" draggable="false">
              <i class="el-icon-circle-close delete-child" @click="delItemList({data:custormItemData.shopdata,index})"></i>
              <div class="item-inner "><span class="labeltext">图片</span>
                <div typetext="图片" show="0" class="small" style="align-self: start;">
                  <div class="uploadSource solid"><i class="delete ivu-icon iconfont icon-input_clear" style="font-size: 16px;"></i>
                    <div class="img" style="cursor:pointer;"  @click="uploadtoggle(index,'image')" :style="{'background-image':`url(${getPath(item.thumb && item.thumb.file_path ? item.thumb.file_path : 'default_banner.png')})`,'height':'50px','background-repeat':'no-repeat','background-size':'cover','background-position':'50%'}"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- <div class="goodscol-add" @click="addItemList({data:custormItemData.data,max:8,itemCopy:{link: '',thumb: {file_path: 'default_banner.png'}}})"><i class="el-icon-plus"></i> 添加</div> -->
        </div>
      </section>
      
    </div>
    <div class="es-form-item">
         <div class="ivu-alert"> <span>秒杀活动的活动时间不能在主题活动时间外</span></div>
      
        <div v-for="(itemdata,index) in custormItemData.Addbtndata" :key="index" style="margin-top:10px;">
             <div style="display:flex;align-items:center;">
             选择秒杀
                    <!-- <el-select v-model="itemdata.value" placeholder="请选择秒杀" style="width:160px;margin-left:10px;">
                        <el-option
                        v-for="item in custormItemData.options"
                        :key="item.id"
                        :label="item.title"
                        :value="item.id"
                        >
                        </el-option>
                   </el-select> -->
              <div class="readonly-div" @click="uploadtoggledata('link',index)">
                  <div class="readonly ivu-input-wrapper ivu-input-wrapper-default ivu-input-type">
                    <input autocomplete="off" spellcheck="false" type="text" placeholder="请选择链接" readonly="readonly" class="ivu-input ivu-input-default" :value="itemdata.title">
                  </div> <i class="icon icon-fujian readonly-icon" style="left: 12px;margin-top:-3px;"></i>
                </div>
            <div>
            </div>
              <el-button style="margin-left:10px;" v-if="itemdata.value" icon="el-icon-delete" circle plain @click="delMeal(index)"></el-button>
             </div>
            
        </div>
    </div>
    <div style="padding:10px 110px 110px 110px;">
      <el-button type="primary" plain @click="Addbtn">添加秒杀</el-button>

    </div>
</section>

</template>

<script>
import defaultConfig from './utils/editConfig'
import {
  getWeChatUrlPath,
} from "@/api/resource";
export default {
  mixins: [defaultConfig.mixins],
  props: {
    defaultConfig: {
      type: Object,
      default: function() {
        return defaultConfig
      }
    }
    
  },
  created () {
  },
  data() {
    return {
      spikeindex:0,
      selectIndex:'',
      imgCurrent: -1,
    }
  },
  methods: {
      delMeal(index){
         if(this.custormItemData.Addbtndata.length==1){
               this.$message.error("最少保留一个活动！")
           }else{
          this.custormItemData.Addbtndata.splice(index,1)

           }
      },
      Addbtn(){
          if(this.custormItemData.Addbtndata.length<4){
          this.custormItemData.Addbtndata.push({value:''})
          }else{
              this.$message.error("最多添加4个秒杀活动！")
          }
      },
    uploadFileCallBack(files) {
      const { key,displayData } = files
      if (key === 'ChooseLink') {
        const { currentRow: [file_path], displayData: [custorm] } = files
        if(this.selectIndex == 'spike'){
           const { displayData } = files
          this.custormItemData.Addbtndata[this.spikeindex].value = displayData[0].id
          this.custormItemData.Addbtndata[this.spikeindex].title = displayData[0].title
        }
        if(this.selectIndex == 'image'){
          if (this.imgCurrent !== -1 && file_path) {
          this.custormItemData.data[this.imgCurrent]['link'] = file_path
        } else {
          if (custorm) {
            this.custormItemData.data[this.imgCurrent]['link'] = custorm

          } else {
            this.$message.error('请选择链接~!')
          }
        }
        }
        
      }else{
        if(this.selectIndex == 'image'){
            const { displayData: [file_path] } = files
        if (this.imgCurrent !== -1 && file_path) {
          this.custormItemData.shopdata[this.imgCurrent]['thumb'] = file_path
        }
        }
      
      }
    },
    
    uploadtoggle(index, type) {
      this.selectIndex = 'image'
        console.log("ggssseeeeeeeeeeeee",index,type)
      var data = this.custormItemData.shopdata[index]['link']
      this.output({ type, params: { editKey: this.custormItemData.key }, data })
      this.imgCurrent = index
            // this.output({ type, params: { editKey: this.custormItemData.key, goodsType: 'sale_hasSale' } })
    },
   
    uploadtoggledata(type,index) {
      this.spikeindex = index
      this.selectIndex = 'spike';
      this.output({ type, params: { editKey: this.custormItemData.key, link_type: 'spike', choose_type: '1' } })
    }
  }
}
</script>

<style lang="scss" scoped>
    .es-form-item{
          padding: 20px 23px;
          font-size: 12px;
          background: #f8f8fa;
          border-radius: 6px;
          margin-bottom: 10px;
    }
    .choose-item-child{
        margin: 0 9px 10px 0;
    border-radius: 4px;
    border: 1px solid #ededed;
    width: 50px;
    height: 50px;
    line-height: 50px;
    position: relative;
    cursor: pointer;
    }
    .uploadSource {
      width: 50px;
      height: 50px;
      line-height: 50px;
      margin-right: 0;
      border: 1px dashed #ededed;
      text-align: center;
      color: #dad9d9;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      float: left;
      position: relative;
    }
    .es-form-item .button-img {
    width: 32px;
    height: 32px;
    margin-right: 20px;
    cursor: pointer;
    border-radius: 4px;
    box-sizing: border-box;
    line-height: 36px;
    text-align: center;
    border: 1px solid transparent;
  }
  .ivu-input-wrapper {
    display: inline-block;
    width: 100%;
    position: relative;
    vertical-align: middle;
    line-height: normal;
  }

  .ivu-input {
    display: inline-block;
    width: 100%;
    height: 32px;
    line-height: 1.5;
    padding: 4px 12px;
    font-size: 12px;
    border: 1px solid #ededed;
    border-radius: 4px;
    color: #333;
    background-color: #fff;
    background-image: none;
    position: relative;
    cursor: text;
    -webkit-transition: border 0.2s ease-in-out, background 0.2s ease-in-out,
      -webkit-box-shadow 0.2s ease-in-out;
    transition: border 0.2s ease-in-out, background 0.2s ease-in-out,
      box-shadow 0.2s ease-in-out;
  }
  .es-form-item .button-img.block {
    width: 100%;
    position: relative;
    min-height: 32px;
    height: auto;
    padding: 10px;
    text-align: left;
  }
  .es-form-item:last-child {
    border-bottom: 0;
  }

  .es-form-item .item-inner {
    margin-top: 8px;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
  }

  .es-form-item .item-inner:first-of-type {
    margin-top: 0;
  }

  .es-form-item .button-img {
    width: 32px;
    height: 32px;
    margin-right: 20px;
    cursor: pointer;
    border-radius: 4px;
    box-sizing: border-box;
    line-height: 36px;
    text-align: center;
    border: 1px solid transparent;
  }

  .es-form-item .button-img.active {
    border-color: #fb6638 !important;
  }

  .es-form-item [type="checkbox"],
  [type="radio"] {
    box-sizing: border-box;
    padding: 0;
  }

  .es-form-item .opacity-0 {
    opacity: 0;
  }

  .es-form-item .button-img .opacity-0 {
    width: 0;
    height: 0;
    position: absolute;
  }

  .es-form-item .alignC {
    text-align: center;
  }

  .es-form-item .item {
    background: #f6f7f9;
    padding: 10px 20px 10px 10px;
    border: 1px solid #eee;
    color: #999;
    position: relative;
    // margin-bottom: 20px;
    width: 200px;
    margin-left: 20px;
  }

  .es-form-item .labeltext {
    width: 40px;
    text-align: right;
    padding-right: 8px;
    color: #666;
  }
  .ivu-input-wrapper {
    display: inline-block;
    width: 100%;
    position: relative;
    vertical-align: middle;
    line-height: normal;
  }
  .es-form-item .item-inner .readonly-div .readonly input {
    background: #e8effc;
    border: 0;
    padding-left: 18px;
    cursor: pointer;
    box-sizing: border-box;
  }
  

  .es-form-item .item-inner .readonly-div {
    position: relative;
    flex-grow: 1;
  }

  .ivu-input-wrapper {
    display: inline-block;
    width: 100%;
    position: relative;
    vertical-align: middle;
    line-height: normal;
  }

  .es-form-item .item-inner .readonly-div .readonly input {
        background: #e8effc;
    border: 0;
    padding-left: 18px;
    cursor: pointer;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  .es-form-item .item-inner .readonly-div .readonly-icon {
    position: absolute;
    top: 5px;
    left: 12px;
  }

  .es-form-item .item .delete-child {
    position: absolute;
    right: 4px;
    top: 0;
    cursor: pointer;
    font-size: 14px;
  }

  //列表结束

  .txbox {
    border-radius: 3px;
    border: 1px solid transparent;
    margin: 0 15px 0 13px;
    height: 32px;
    width: 32px;
    cursor: pointer;
  }

  .txbox img {
    max-width: 17px;
    max-height: 17px;
  }

  .txbox.active {
    border-color: #409eff;
  }

  .yzt {
    background: #dcdcdc;
    height: 15px;
    width: 26px;
    border-radius: 8px;
    color: #fff;
    text-align: center;
  }

  .cft {
    background: #dcdcdc;
    height: 15px;
    width: 25px;
  }

  .yuan {
    background: #dcdcdc;
    height: 15px;
    width: 15px;
    border-radius: 15px;
  }

  .ivu-alert {
    position: relative;
    padding: 8px 16px;
    border-radius: 6px;
    color: #666;
    font-size: 12px;
    line-height: 22px;
    margin-bottom: 10px;
    border: 1px solid #d8e8fc;
    background-color: #e5f0fe;
  }
.goodscol-add{
  border: 1px solid #6b7685;
    line-height: 32px;
    height: 32px;
    border-radius: 4px;
    text-align: center;
    cursor: pointer;
}

      

</style>
